<template>
  <div class="app-container">
    <!-- 1. 搜索区域 -->
    <el-form :inline="true" :model="queryParams" class="search-form" label-width="80px">
      <!-- 日期时间筛选（所有人可见） -->
      <el-form-item label="上班打卡时间" prop="clockInTime">
        <el-date-picker clearable
                        v-model="queryParams.clockInTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="请选择上班打卡时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="下班打卡时间" prop="clockOutTime">
        <el-date-picker clearable
                        v-model="queryParams.clockOutTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="请选择下班打卡时间">
        </el-date-picker>
      </el-form-item>

      <!-- 用户名筛选（仅管理员可见） -->
      <el-form-item label="用户名" v-if="isAdmin">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入用户名"
          clearable
          size="small"
          style="width: 200px;"
        ></el-input>
      </el-form-item>

      <!-- 搜索/重置按钮 -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getAttendanceList">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 2. 打卡按钮（仅普通用户可见） -->
    <div class="btn-group" v-if="!isAdmin" style="margin-bottom: 15px;">
      <el-button
        type="success"
        icon="el-icon-check"
        @click="handleClockIn"
        :disabled="isClockInDisabled"
      >
        上班打卡
      </el-button>
      <el-button
        type="primary"
        icon="el-icon-circle-check"
        @click="handleClockOut"
        :disabled="isClockOutDisabled"
        style="margin-left: 10px;"
      >
        下班打卡
      </el-button>
    </div>

    <!-- 5. 本月考勤统计（仅普通用户可见） -->
    <el-card v-if="!isAdmin" style="margin-top: 20px;">
      <div slot="header" class="clearfix">
        <span>本月考勤统计（不包含节假日/周末）</span>
      </div>
      <el-row :gutter="20" style="margin-top: 10px;">
        <el-col :span="6">
          <div class="stat-item">正常出勤：{{ monthStat.normalCount }} 次</div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">迟到：{{ monthStat.lateCount }} 次</div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">早退：{{ monthStat.earlyLeaveCount }} 次</div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">旷工：{{ monthStat.absentCount }} 次</div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 3. 考勤记录表格 -->
    <el-table
      v-loading="loading"
      :data="attendanceList"
      border
      fit
      stripe
      style="width: 100%;"
    >
      <el-table-column label="ID" prop="id" align="center" width="80"></el-table-column>
      <el-table-column label="用户名" prop="userName" align="center" width="120"></el-table-column>
      <el-table-column label="上班打卡时间" prop="clockInTime" align="center" width="200">
        <template slot-scope="scope">
          {{ scope.row.clockInTime ? formatDateTime(scope.row.clockInTime) : '-' }}
        </template>
      </el-table-column>
      <el-table-column label="下班打卡时间" prop="clockOutTime" align="center" width="200">
        <template slot-scope="scope">
          {{ scope.row.clockOutTime ? formatDateTime(scope.row.clockOutTime) : '-' }}
        </template>
      </el-table-column>
      <el-table-column label="考勤状态" prop="status" align="center" width="120">
<!--        <template slot-scope="scope">-->
<!--          <dict-tag :options="dicts.type.attendance_status" :value="scope.row.status"/>-->
<!--        </template>-->
      </el-table-column>
    </el-table>

    <!-- 4. 分页控件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryParams.pageNum"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="queryParams.pageSize"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top: 15px;"
    ></el-pagination>


    <!-- 6. 打卡提示弹窗 -->
    <el-dialog
      title="考勤提示"
      :visible.sync="tipDialogVisible"
      width="30%"
      :close-on-click-modal="false"
    >
      <div class="tip-content">{{ tipContent }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="tipDialogVisible = false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import { formatDate } from '@/utils/dateUtils'
import {getAttendanceList, clockIn, clockOut, getMonthStat, getUserRoleType} from "@/api/attendance/attendance";

export default {
  name: 'AttendanceList',
  computed: {},
  dicts: ['attendance_status'],
  data() {
    return {
      // 表格加载状态
      loading: false,
      // 考勤记录列表
      attendanceList: [],
      // 分页参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: '',
        userId: this.$store.getters.userId, // 普通用户默认传自身ID
        clockInTime: undefined,
        clockOutTime: undefined,
        status: undefined
      },
      // 日期范围选择器
      dateRange: [],
      isAdmin: undefined,
      // 总记录数
      total: 0,
      // 打卡按钮禁用状态 - 全部设为false保持可用
      isClockInDisabled: false,
      isClockOutDisabled: false,
      // 本月统计数据
      monthStat: {
        normalCount: 0,
        lateCount: 0,
        earlyLeaveCount: 0,
        absentCount: 0
      },
      // 提示弹窗
      tipDialogVisible: false,
      tipContent: ''
    }
  },
  created() {
    // 页面初始化：先获取用户角色类型
    getUserRoleType().then(response => {
      // 后端传递的值1表示管理员，2表示普通用户
      this.isAdmin = response.data === 1
      
      // 获取角色后再执行其他逻辑
      this.getAttendanceList()
      if (!this.isAdmin) {
        this.getMonthStat()
        // 检查当日打卡状态（控制按钮禁用）
        this.checkTodayClockStatus()
      }
    })
  },
  methods: {
    /**
     * 获取考勤记录列表
     */
    getAttendanceList() {
      getUserRoleType().then(response => {
        // 后端传递的值1表示管理员，2表示普通用户
        this.isAdmin = response.data === 1
        console.log("当前用户类型:", response.data, "是否管理员:", this.isAdmin);
        
        // 在获取角色后再执行其他逻辑
        this.loading = true
        getAttendanceList(this.queryParams).then(res => {
          this.attendanceList = res.rows
          this.total = res.total
          console.log(this.attendanceList)
          this.loading = false
          
          // 对于非管理员用户，在获取考勤列表后重新检查今日打卡状态
          if (!this.isAdmin) {
            this.checkTodayClockStatus()
          }
        }).catch(() => {
          this.loading = false
          this.$message.error('查询考勤记录失败，请重试')
        })
      })
    },

    /**
     * 上班打卡
     */
    handleClockIn() {
      clockIn().then(response => {
        this.$message.success(response.msg)
        // 迟到/早退时显示提示弹窗（状态码：2-迟到, 3-早退）
        if (response.data === 2 || response.data === 3) {
          this.tipContent = response.msg
          this.tipDialogVisible = true
        }
        // 不再更新按钮状态，保持始终可用
        // 刷新列表和统计
        this.getAttendanceList()
        this.getMonthStat()
      })
    },

    /**
     * 下班打卡
     */
    handleClockOut() {
      clockOut().then(response => {
        this.$message.success(response.msg)
        // 早退时显示提示弹窗（状态码：3-早退）
        if (response.data === 3) {
          this.tipContent = response.msg
          this.tipDialogVisible = true
        }
        // 不再更新按钮状态，保持始终可用
        // 刷新列表和统计
        this.getAttendanceList()
        this.getMonthStat()
      })
    },

    /**
     * 获取当月考勤统计（普通用户）
     */
    getMonthStat() {
      getMonthStat().then(response => {
        // 确保response.data存在，避免monthStat变为undefined
        this.monthStat = response.data || {
          normalCount: 0,
          lateCount: 0,
          earlyLeaveCount: 0,
          absentCount: 0
        }
      }).catch(() => {
        this.$message.error('查询当月考勤统计失败，请重试')
      })
    },

    /**
     * 检查当日打卡状态（控制按钮禁用）
     * 由于需求变更为始终保持按钮可用，此方法保留但不再设置按钮状态
     */
    checkTodayClockStatus() {
      // 创建临时查询参数，而不是修改实际的查询参数
      const tempParams = {...this.queryParams}

      // 设置日期格式为yyyy-MM-dd HH:mm:ss格式
      const today = formatDate(new Date(), 'yyyy-MM-dd')
      tempParams.clockInTime = today + ' 00:00:00'
      tempParams.clockOutTime = today + ' 23:59:59'

      getAttendanceList(tempParams).then(response => {
        // 保留查询逻辑但不再设置按钮状态
        console.log('今日打卡记录:', response.rows)
      }).catch(() => {
        console.error('检查当日打卡状态失败')
      })
    },


    /**
     * 重置查询参数
     */
    resetQuery() {
      this.dateRange = []
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        userName: '',
        userId: this.$store.getters.userId,
        clockInTime: undefined,
        clockOutTime: undefined,
        status: undefined
      }
      this.getAttendanceList()
    },

    /**
     * 每页条数变化
     */
    handleSizeChange(pageSize) {
      this.queryParams.pageSize = pageSize
      this.getAttendanceList()
    },

    /**
     * 当前页码变化
     */
    handleCurrentChange(pageNum) {
      this.queryParams.pageNum = pageNum
      this.getAttendanceList()
    },

    // /**
    //  * 根据状态获取标签类型
    //  */
    // getStatusTagType(status) {
    //   switch (status) {
    //     case 1:
    //       return 'success'
    //     case 2:
    //     case 3:
    //       return 'warning'
    //     case 4:
    //       return 'danger'
    //     default:
    //       return 'info'
    //   }
    // },

    /**
     * 格式化日期时间（yyyy-MM-dd HH:mm:ss）
     */
    formatDateTime(dateStr) {
      try {
        // 确保格式化为yyyy-MM-dd HH:mm:ss
        return formatDate(new Date(dateStr), 'yyyy-MM-dd HH:mm:ss')
      } catch (e) {
        console.error('日期格式化错误:', e)
        return '-'  // 格式化失败时返回占位符
      }
    }
  }
}
</script>

<style scoped>
.search-form {
  margin-bottom: 15px;
}
.stat-item {
  text-align: center;
  padding: 10px;
  font-size: 14px;
  color: #666;
}
.tip-content {
  text-align: center;
  padding: 20px 0;
  font-size: 16px;
  color: #f56c6c;
}
</style>
